<template>
  <div class="component-upload-image">
    <el-upload
      :action="imgUpload.url"
      ref="uploadicon"
      :headers="imgUpload.headers"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload"
      :on-error="handleUploadError"
      list-type="picture-card"
      :limit="9"
      :file-list="formImgValue"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-remove="handleBeforeRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <!--图片预览的dialog-->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  data() {
    return {
      iconformData: [],
      fileListShow: [],
      //图片上传判断是否有相同图片
      isCommonName: true,
      //页面上存的暂时图片地址List
      fileListPut: [],
      dialogImageUrl: '',
      imgUpload: {
        headers: {Authorization: "Bearer " + getToken()},// 设置上传的请求头部
        url: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        url2: process.env.VUE_APP_BASE_API,  // // 图片上传的方法地址:
      },
      dialogVisible: false,
    };
  },
  props: {
    formImg: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    formImgValue(){
      return this.formImg
    }
  },
  created() {
    this.fileListPut = this.formImgValue
    console.log(this.fileListPut)
  },
  methods: {
    parentHandleclick() {
      this.$refs.uploadicon.clearFiles();
      this.fileListPut = []
    },
    //删除文件之前的钩子
    handleBeforeRemove(file) {
      console.log(this.fileListPut)
    },
    //图片上传删除
    handleRemove(file) {
      console.log("ddddd",file)
      // this.fileListPut = this.formImgValue
      //根据传进来删除的file里图片，同时删除保存在fileListPut的相同图片
      if (this.fileListPut.length > 0) {
        this.fileListPut = this.fileListPut.filter((item, index) => {
          return item.fileName != file.fileName;
        })
      }
      this.$emit("imageUpload", this.fileListPut)
    },
    //图片上传成功后的回调
    handleUploadSuccess(file, res) {
      // let currentFile = {name: res.name, fileName: file.fileName, url: file.url};
      let currentFile = {fileName: file.fileName, url: file.url};
      this.fileListPut.push(currentFile)
      this.$emit("imageUpload", this.fileListPut)
    },

    //上传之前
    handleBeforeUpload(file) {
      this.fileListPut = this.formImg
      this.isCommonName = true;
      const isJPG = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/gif" || file.type === "image/webp" ;
      const isLt2M = file.size / 1024 / 1024 < 5;
      /*//判断是否有相同的图片，如何有即提示并添加失败
      if (this.fileListPut.length > 0) {
        this.fileListPut.forEach((item, index) => {
          if (item.name == file.name) {
            this.$message.error('已存在相同的图片！');
            this.isCommonName = false;
          }
        })
      }*/
      if (!isJPG) {
        this.$message.error('上传文件的后缀 只能是 jpg/jpeg/png/gif！');
      }
      if (!isLt2M) {
        this.$message.error('上传的图片不能超过5MB!');
      }
      return isJPG && isLt2M && this.isCommonName;
    },
    //上传失败
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
/deep/.el-upload-list--picture-card .el-upload-list__item-status-label{
  width: 40px !important;
}
/deep/.el-upload-list--picture-card .el-upload-list__item{
  width: 80px;
  height: 80px;
}
/deep/.el-upload--picture-card{
  width: 80px;
  height: 80px;
  line-height: 88px;
}
/*.image {
  position: relative;

  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }

  &:hover .mask {
    opacity: 1;
  }
}*/
</style>
